import React, {Component, Fragment} from 'react'
import PropTypes from "prop-types"
import './style.css'

import {

} from '@clake/react-bootstrap4';

export default class GoCaptchaBtn extends Component{
  static defaultProps = {
    // ============================
    // 为了解决状态冲突加一个 overing
    // ============================
    value: PropTypes.oneOf(['default', 'check', 'error', 'over', 'overing', 'success']),
    width: '300px',
    height: '50px',
    maxDot: PropTypes.number,
    imageBase64: PropTypes.string,
    thumbBase64: PropTypes.string
  }

  constructor(props) {
    super(props);
    this.state = {
      popoverVisible: false,
      captStatus: 'default',
      imageBase64: '',
      thumbBase64: ''
    }
  }

  componentDidMount() {
    // $('#go_captcha').popover({
    //   html:true,
    //   content:$('.wg-cap-wrap'),
    //   placement:'top',
    // })
  }

  render() {
    const {
      popoverVisible,
      captStatus,
      imageBase64,
      thumbBase64
    } = this.state
    const {
      width,
      height
    } = this.props

    return (
      <>
        <div id='go_captcha' className='wg-cap-btn' style={{
          width: width,
          height: height
        }}>
          <div className={(`wg-cap-btn__inner wg-cap-active__${captStatus}`)}>
            {/* wg-cap-active__default wg-cap-active__error wg-cap-active__over wg-cap-active__success */}
              <div onClick={this.handleBtnEvent} className="wg-cap-state__default">
                {/*默认状态*/}
                <div className="wg-cap-state__inner">
                  <div className="wg-cap-btn__ico wg-cap-btn__verify">
                    <img
                      src="" alt=""/>
                  </div>
                  <span className="wg-cap-btn__text">点击按键进行人机验证</span>
                </div>
              </div>
              <div onClick={this.handleCancelEvent} className="wg-cap-state__check">
                {/* 验证状态 */}
                <div className="wg-cap-state__inner">
                  <div className="wg-cap-btn__ico">
                    <img
                      src=""
                      alt=""/>
                  </div>
                  <span className="wg-cap-btn__text">正在进行人机验证...</span>
                </div>
              </div>
              <div onClick={this.handleBtnEvent} className="wg-cap-state__error">
                {/*验证失败状态*/}
                <div className="wg-cap-state__inner">
                  <div className="wg-cap-btn__ico">
                    <img
                      src=""
                      alt="失败"/>
                  </div>
                  <span>人机验证失败 <em>点击重试</em></span>
                </div>
              </div>
              <div onClick={this.handleBtnEvent} className="wg-cap-state__over">
                {/*验证次数过多状态*/}
                <div className="wg-cap-state__inner">
                  <div className="wg-cap-btn__ico">
                    <img
                      src=""
                      alt="失败"/>
                  </div>
                  <span>点击次数过多 <em>点击重试</em></span>
                </div>
              </div>
              <div onClick={this.handleCancelEvent} className="wg-cap-state__success">
                {/*验证成功状态*/}
                <div className="wg-cap-state__inner">
                <div className="wg-cap-btn__ico">
                  <img
                    src=""
                    alt="成功"/>
                </div>
                <span>人机验证已通过</span>
              </div>
              </div>
          </div>
        </div>
      </>
    )
  }

  // ===========
  static getDerivedStateFromProps(nextProps, prevState) {
    const res = {}
    let count = 0

    if (prevState.popoverVisible) {
      res['captStatus'] = 'check'
      count++
      // if (prevState.captStatus !== 'check') {
        // nextProps.refresh && nextProps.refresh()
      // }
    } else if (prevState.captStatus === 'check') {
      res['captStatus'] = nextProps.value
      count++
    }

    if (!prevState.popoverVisible) {
      res['imageBase64'] = ''
      res['thumbBase64'] = ''
    } else {
      res['imageBase64'] = nextProps.imageBase64
      res['thumbBase64'] = nextProps.thumbBase64
    }

    if (nextProps.value !== prevState.captStatus){
      if (prevState.captStatus !== 'check') {
        res['captStatus'] = nextProps.value
        count++
      }

      // ============================
      // 为了解决状态冲突加一个 overing
      // ============================
      if (nextProps.value === 'overing') {
        res['popoverVisible'] = false
        res['captStatus'] = 'over'
        count++
        if (nextProps.value !== 'over'){
          nextProps.changeValue && nextProps.changeValue('over')
        }
      } else if (nextProps.value === 'success') {
        res['popoverVisible'] = false
        res['captStatus'] = 'success'
        count++
      }
    }

    return (count ? res : null)
  }

  // ================= Methods ================
  handleCancelEvent = (e) => {
    // 阻止合成事件的冒泡
    e.stopPropagation();
    // 阻止与原生事件的冒泡
    e.nativeEvent.stopImmediatePropagation();
    return false
  }
  handleVisibleChange = (visible) => {
    this.setState({popoverVisible: visible})
    if (visible) {
      this.props.refresh && this.props.refresh()
    }
  }

  handleBtnEvent = () => {
    // this.setState({
    //   popoverVisible: true
    // })
    this.props.show && this.props.show();
  }

  handleRefreshEvent = () => {
    this.setState({
      captStatus: 'check'
    })
    this.props.refresh && this.props.refresh()
  }

  handleConfirmEvent = (data) => {
    this.props.confirm && this.props.confirm(data)
  }

  handleCloseEvent = () => {
    this.setState({
      popoverVisible:false
    })
  }
}